<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('设备活跃统计列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <form id="formId">
                <div class="col-sm-12 search-collapse">
                    <div class="btn-group-sm">
                        展示方式:
                        <div >
                            <!--<label class="check-box">
                                <input type="checkbox" id="viewHour1">小时</label>-->
                            <label class="check-box">
                                <input type="checkbox" id="viewDate1">日期</label>
                            <label class="check-box">
                                <input type="checkbox" id="viewChannelId1">渠道</label>
                            <label class="check-box">
                                <input type="checkbox" id="viewProductId1">应用</label>
                            <label class="check-box">
                                <input type="checkbox" id="viewPhoneBrand1">手机品牌</label>
                            <label class="check-box">
                                <input type="checkbox" id="viewAndroidVersion1">安卓版本</label>
                        </div>
                    </div>
                    <div class="select-list">
                        <ul>
                            <li>
                                开始时间：
                                <input type="text" class="time-input" placeholder="请选择开始时间" name="startCreateTime" th:value="${#dates.format(startCreateTime, 'yyyy-MM-dd')}"/>
                            </li>
                            <li>
                                截止时间：
                                <input type="text" class="time-input" placeholder="请选择结束时间" name="endCreateTime" th:value="${#dates.format(endCreateTime, 'yyyy-MM-dd')}"/>
                            </li>
                            <li>
                                <label>渠道：</label>
                                <select name="channelId">
                                    <option value="">请选择渠道</option>
                                    <option th:each="channel:${channelList}" th:text="${channel.name}" th:value="${channel.code}"></option>
                                </select>
                            </li>
                            <li>
                                <label>应用：</label>
                                <select name="productId">
                                    <option value="">请选择应用</option>
                                    <option th:each="product:${productList}" th:text="${product.name}" th:value="${product.id}"></option>
                                </select>
                            </li>

                            <li>
                                <label>手机品牌：</label>
                                <select name="phoneBrand" id="phoneBrand">
                                    <option value="">请选择手机品牌</option>
                                    <option th:each="phoneBrand:${phoneBrandList}" th:text="${phoneBrand}" th:value="${phoneBrand}" ></option>
                                </select>
                            </li>
                            <li>
                                <label>安卓版本：</label>
                                <select name="androidVersion" id="androidVersion">
                                    <option value="">请选择安卓版本</option>
                                    <option th:each="androidVersion:${androidVersionList}" th:text="${androidVersion}" th:value="${androidVersion}" ></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="onSearch()"><i class="fa fa-search"></i>&nbsp;查询</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
            </div>
                <input type="hidden" name="viewHour" id="viewHour" value="0">
                <input type="hidden" name="viewDate" id="viewDate" value="0">
                <input type="hidden" name="viewChannelId" id="viewChannelId" value="0">
                <input type="hidden" name="viewProductId" id="viewProductId" value="0">
                <input type="hidden" name="viewPhoneBrand" id="viewPhoneBrand" value="0">
                <input type="hidden" name="viewAndroidVersion" id="viewAndroidVersion" value="0">
            </form>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "product/deviceStatis";

        $(function() {
            var options = {
                url: prefix + "/activelist",
                modalName: "用户设备活跃统计",
                sortName: "returnCount",
                sortOrder: "desc",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'returnDate',
                    title: '日期',
                    sortable: true
                },
                {
                    field: 'returnCount',
                    title: '数量',
                    sortable: true
                },
                ]
            };
            $.table.init(options);
        });


    function onSearch() {
        var channelNameVis = false;
        var productNameVis = false;
        var phoneBrandVis = false;
        var androidVersionVis = false;
        var dateVis = false;

        if($('#viewProductId1').is(':checked')) {
            productNameVis = true;
        }
        if($('#viewChannelId1').is(':checked')) {
            channelNameVis = true;
        }
        if($('#viewPhoneBrand1').is(':checked')) {
            phoneBrandVis = true;
        }
        if($('#viewAndroidVersion1').is(':checked')) {
            androidVersionVis = true;
        }

        if($('#viewDate1').is(':checked') || (!productNameVis && !phoneBrandVis && !androidVersionVis && !channelNameVis && !channelNameVis)) {
            dateVis = true;
        }

        var options = {
            url: prefix + "/activelist",
            modalName: "用户设备活跃统计",
            sortName: "returnCount",
            sortOrder: "desc",
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '${comment}',
                    visible: false
                },
                {
                    field: 'returnDate',
                    title: '日期',
                    visible: dateVis,
                    sortable: true
                },
                {
                    field: 'returnChannelName',
                    title: '渠道',
                    visible: channelNameVis
                },
                {
                    field: 'returnProductName',
                    title: '应用名称',
                    visible: productNameVis
                },
                {
                    field: 'returnPhoneBrand',
                    title: '手机品牌',
                    visible: phoneBrandVis
                },
                {
                    field: 'returnAndroidVersion',
                    title: '安卓版本',
                    visible: androidVersionVis
                },
                {
                    field: 'returnCount',
                    title: '数量',
                    sortable: true
                },
                {
                    field: 'total',
                    title: '总计'
                },
            ]
        };
        $.table.refreshOptions(options,"bootstrap-table");

        oncheckBox();
        $.table.search();
    }

    function oncheckBox() {
        if($('#viewHour1').is(':checked')) {
           $("#viewHour").val("1");
        }else{
            $("#viewHour").val("0");
        }
        if($('#viewDate1').is(':checked')) {
            $("#viewDate").val("1");
        }else{
            $("#viewDate").val("0");
        }
        if($('#viewChannelId1').is(':checked')) {
            $("#viewChannelId").val("1");
        }else{
            $("#viewChannelId").val("0");
        }
        if($('#viewProductId1').is(':checked')) {
            $("#viewProductId").val("1");
        }else{
            $("#viewProductId").val("0");
        }
        if($('#viewPhoneBrand1').is(':checked')) {
            $("#viewPhoneBrand").val("1");
        }else{
            $("#viewPhoneBrand").val("0");
        }
        if($('#viewAndroidVersion1').is(':checked')) {
            $("#viewAndroidVersion").val("1");
        }else{
            $("#viewAndroidVersion").val("0");
        }
    }

    function selectPhoneBrand() {
        var phoneBrand = $("#phoneBrand").val();
        $.ajax({
            type: "GET",
            url: prefix + "/activeChangePhoneBrand?phoneBrand="+phoneBrand,
            cache: false,
            dataType: 'json',
            success: function(result) {
                if (result) {
                    var html = "<option value=''>请选择安卓版本</option>";
                    for (var i = 0; i < result.length; i++) {
                        html += "<option value='" + result[i] + "'>" + result[i] + "</option>"
                    }
                   $('#androidVersion').html(html);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("失败。");
            }
        });
    }
    </script>
</body>
</html>